<template>
  <div class="distributor-invoice-receivable">
    <!-- 搜索 -->
    <div class="header">
      <m-search
        ref="SearchForm"
        label-width="66px"
        :data="SEARCH_DATA"
        @searchForm="onSearch"
        @resetForm="onReset"
      />
    </div>
    <!-- tab状态 -->
    <div class="tab">
      <tabs
        :tabs-arr="TAB_ARR"
        :active-index="auditStatus"
        @returnIndex="onHandletabs"
      >
        <el-button
          :disabled="!table.dataList.length"
          type="primary"
          @click="onDownload"
        >
          <m-iconfont
            classify="m-pc-public"
            icon="m-pc-public_daocsj"
            size="14"
          /><span>导出数据</span>
        </el-button>
      </tabs>
    </div>
    <!-- 列表 -->
    <m-editable
      v-loading="table.tableLoading"
      :empty-type="table.resultType"
      :data="table.dataList"
      :columns="COLUMNS_TABLE"
      height="400"
    >
      <template slot="default-action" slot-scope="scope">
        <!-- <el-button
            v-viewer
            :disabled="!scope.row.invoiceImg"
            type="primary"
            plain
            size="mini"
            :class="'content__m-editable-img' + scope.row.invoiceBaseId"
            @click.stop="
              toPreview('.content__m-editable-img' + scope.row.invoiceBaseId)
            "
            >查看<el-image
              style="display: none"
              :src="scope.row.invoiceImg"
            ></el-image>
          </el-button> -->

        <el-button
          :disabled="scope.row.billingStatus !== '4'"
          type="primary"
          plain
          size="mini"
          @click.stop="toExamine(scope.row)"
          >审核</el-button
        >
        <el-button
          type="primary"
          plain
          size="mini"
          @click.stop="onDetails(scope.row)"
          >查看</el-button
        >
      </template>
    </m-editable>
    <!-- 分页模块 -->
    <div v-if="table.dataList.length > 0" class="footer">
      <el-pagination
        class="pageBox"
        align="right"
        :page-size="page.size"
        :current-page="page.curPage"
        :total="page.total"
        :layout="page.PAGINATION_LAYOUT"
        :page-sizes="page.PAGE_NUMBER"
        @size-change="onPageSizeChange"
        @current-change="onPageCurrentChange"
      />
    </div>
    <m-dialog
      class="popup__m-dialog"
      title="审核"
      width="1000px"
      :confirm-loading="examine.loading"
      :visible.sync="examine.isShow"
      :before-close="onHandleClose"
      :footer-visible="examine.isShowButton"
      @refuse="onHandleClose"
      @closeBtn="onHandleClose"
    >
      <template #content>
        <m-editable
          v-loading="examine.tableLoading"
          class="content__m-editable"
          :empty-type="examine.resultType"
          :data="examine.dataList"
          :columns="EXAMINE_TABLE"
          height="400"
          style="height: 300px"
        >
          <template slot="default-remarks" slot-scope="scope">
            <p v-if="scope.row.status !== 4">{{ scope.row.remarks }}</p>
            <el-input
              v-else
              v-model="scope.row.remarks"
              size="mini"
              placeholder="请输入"
              maxlength="50"
            ></el-input>
          </template>
          <template slot="default-action" slot-scope="scope">
            <el-button
              v-if="scope.row.status === 4"
              type="primary"
              plain
              size="mini"
              @click.stop="onExaminePassReject(scope.row, 2)"
              >通过</el-button
            >
            <el-button
              v-if="scope.row.status === 4"
              type="primary"
              plain
              size="mini"
              @click.stop="onExaminePassReject(scope.row, 5)"
              >驳回</el-button
            >
          </template>
        </m-editable>
      </template>
    </m-dialog>
  </div>
</template>
<script>
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common';
import tabs from '@pc/m-components/m-tabs/index.vue';
import {
  distributorReceiveInvoiceList,
  distributorReceiveInvoiceStatistics,
  queryReceiveInvoiceExamineList,
  queryReceiveInvoiceExamine,
  exportReceiveInvoice,
} from '@api/hossyn-order-center';
import { $loadFileSimply } from '@pc/const/loadFileOps';
import { fileDownload } from '@pc/const/utils';
import { formatDate } from '@const/filter.js';
import * as CONSTS from './const';

export default {
  components: {
    tabs,
  },
  data() {
    return {
      ...CONSTS,
      auditStatus: 0,
      table: {
        tableLoading: false,
        resultType: 0,
        dataList: [],
      },
      page: {
        PAGE_NUMBER, // 页码数组
        PAGINATION_LAYOUT, // 页码功能布局
        curPage: 1,
        pageSize: PAGE_NUMBER[0],
        total: 0,
      },
      examine: {
        loading: false,
        isShow: false,
        isShowButton: false,
        tableLoading: false,
        resultType: 0,
        dataList: [],
        settleOrderMainId: '',
      },
    };
  },
  mounted() {
    this.getDataList();
    this.getInvoiceStatistics();
  },
  methods: {
    // 下载数据
    onDownload() {
      const params = {
        url: exportReceiveInvoice,
        method: 'post',
        data: {
          ...this.table.searchData,
          billingStatus: this.TAB_ARR[this.auditStatus].val,
        },
      };
      const timeStr = formatDate(new Date(), 'YYYYMMDDHHmmss');
      $loadFileSimply(params).then((res) => {
        fileDownload(res, `查询导出${timeStr}.xls`);
      });
    },
    // 审核操作
    toExamine(row) {
      this.examine.isShow = true;
      this.examine.settleOrderMainId = row.settleOrderMainId;
      this.getDistributorSettleExamineList();
    },
    // 获取审核的子单
    getDistributorSettleExamineList() {
      this.examine.loading = true;
      this.$axios({
        url: queryReceiveInvoiceExamineList,
        method: 'post',
        data: {
          settleOrderMainId: this.examine.settleOrderMainId,
        },
      })
        .then((res) => {
          this.examine.dataList = res.data.payload || [];
        })
        .finally(() => {
          this.examine.loading = false;
        });
    },
    // 审核通过or拒绝
    onExaminePassReject(row, status) {
      const dataObj = {
        remarks: row.remarks,
        salseCode: row.salseCode,
        salseId: row.salseId,
        settleMainOrderId: row.settleMainOrderId,
        status,
      };
      this.$axios({
        url: queryReceiveInvoiceExamine,
        method: 'post',
        data: [dataObj],
      })
        .then((res) => {
          if (res.data.code === '0' && status === 2) {
            this.$message({
              type: 'success',
              message: '审核已通过!',
            });
          } else {
            this.$message({
              type: 'warning',
              message: '审核已驳回!',
            });
          }
          this.getDistributorSettleExamineList();
        })
        .finally(() => {
          this.examine.loading = false;
        });
    },
    // 关闭审核弹框
    onHandleClose() {
      this.examine.isShow = false;
      this.getDataList();
      this.getInvoiceStatistics();
    },
    //  发票信息-预览图片
    // toPreview(className) {
    //   const viewer = this.$el.querySelector(className).$viewer;
    //   viewer.show();
    // },
    // 获取统计小红点
    getInvoiceStatistics() {
      this.$axios({
        url: distributorReceiveInvoiceStatistics,
        method: 'post',
      }).then((res) => {
        const statisticsArr = res.data.payload || [];
        statisticsArr.forEach((it) => {
          if (it.status === 1) {
            this.TAB_ARR[1].badge = it.num || '';
          }
          if (it.status === 4) {
            this.TAB_ARR[2].badge = it.num || '';
          }
        });
      });
    },
    // 详情
    onDetails(row) {
      this.$router.push({
        path: '/distributorSide/invoice-management/invoice-details',
        query: {
          settleOrderId: row.receiveInvoiceId,
          settleOrderCode: row.settleOrderMainCode,
          settleOrderMainId: row.settleOrderMainId,
          isNoShowBilling: 1,
        },
      });
    },
    // 获取列表数据
    getDataList(flage) {
      this.table.tableLoading = true;
      this.$axios({
        url: distributorReceiveInvoiceList,
        method: 'post',
        data: {
          ...this.table.searchData,
          billingStatus: this.TAB_ARR[this.auditStatus].val,
          page: this.page.curPage,
          pageSize: this.page.pageSize,
        },
      })
        .then((res) => {
          this.table.dataList = res.data.payload.content || [];
          this.page.total = res.data.payload.totalElements || 0;
          if (flage) {
            this.table.resultType = 1;
          } else {
            this.table.resultType = 0;
          }
        })
        .finally(() => {
          this.table.tableLoading = false;
        });
    },
    // 搜索
    onSearch(condition) {
      this.page.curPage = 1;
      this.table.searchData = condition;
      this.getDataList('search');
      this.getInvoiceStatistics();
    },
    // 重置
    onReset(condition) {
      this.page.curPage = 1;
      this.table.searchData = condition;
      this.getDataList();
      this.getInvoiceStatistics();
    },
    // tab切换事件
    onHandletabs(val) {
      this.page.curPage = 1;
      this.auditStatus = val;
      this.getDataList();
      this.getInvoiceStatistics();
    },
    // 点击分页事件
    onPageSizeChange(size) {
      this.page.pageSize = size;
      this.getDataList();
      this.getInvoiceStatistics();
    },
    onPageCurrentChange(curPage) {
      this.page.curPage = curPage;
      this.getDataList();
      this.getInvoiceStatistics();
    },
  },
};
</script>
<style lang="less">
.distributor-invoice-receivable {
  margin: 0 20px 10px 20px !important;
  display: flex;
  flex-direction: column;
  .tab {
    margin-bottom: 20px;
  }
  .footer {
    padding: 7px 26px 6px 0;
    border: 1px solid @cutOffRuleColor;
    border-top: none;
    border-radius: 0 0 3px 3px;
  }
}
</style>
